;
window.onload = function () {


    // 头部 二维码
    function qrplay() {
        $('.top-qr').hover(function () {
            $('.top-qr-img').toggle()
        })
    }


    // 购物车数据加载
    if (localStorage.getItem("userinfo")) {
        $.ajax({
            url: '/cart/query',
            type: 'get',
            data: {
                uId: JSON.parse(localStorage.getItem("userinfo"))[0].u_id
            }
        }).then(function (res) {
            if (res.data == '') {
                $('.lists table thead tr').show()
            } else {
                render(res.data);
                $('.lists table thead tr').hide()
            }

        })
    } else {
        $('.lists table thead tr').show()
        console.log('购物车没有商品');
    }

    //头部购物车数据渲染方法
    function render(list) {
        let strHtml = ``;
        list.forEach(el => {

            strHtml += `<tr data-cid=${el.c_id}>`
            strHtml += `<td class="name">${el.c_name}</td>`
            strHtml += `<td class="size">${el.c_size}</td>`
            strHtml += `<td class="operate">删除</td>`
            strHtml += `</tr>`
        });

        $('.lists table tbody').html(strHtml)
    }


    // 购物车

    function buycarpaly() {
        $('.buycar').mouseenter(function () {
            $('.lists').stop().show()
            $(this).children('em').stop().show()
            $(this).css({
                borderBottom: '3px solid #fff',
                background: 'white',
            }).children('.icon-gouwuche1').css({
                color: '#b71c20'
            })
            $(this).children('a').css({
                color: '#b71c20',
            })
        })

        $('.buycar').mouseleave(function () {
            $('.lists').stop().hide()
            $(this).children('em').stop().hide()
            $(this).css({
                border: '1px solid #b81c22',
                background: '#b71c20',
            }).children('.icon-gouwuche1').css({
                color: '#fff'
            })
            $(this).children('a').css({
                color: '#fff',
            })
        })
    }

    // 菜单导航  
    function menuplay() {
        $('.nav-list').on('mouseenter', 'li', function () {
            $(this).children('ul').stop().slideDown(10);
        })
        $('.nav-list').on('mouseleave', 'li', function () {
            $(this).children('ul').stop().slideUp();
        })
    }

    // 放大镜

    function magnifier() {
        $('.pre-zoom').on('mouseenter', function () {
            $('.midbox').css({
                width: $('.pre-zoom').children('img').width() / $(".bigimg").width() * $('.pre-bigzoom').width(),
                height: $('.midimg').height() / $(".bigimg").height() * $('.pre-bigzoom').height()
            })
            $('.midbox').stop().show()
            $('.pre-bigzoom').stop().show()

            $(this).on('mousemove', function (e) {
                let mx = e.pageX - $(this).offset().left - $('.midbox').width() / 2;
                let my = e.pageY - $(this).offset().top - $('.midbox').height() / 2

                if (mx <= 0) {
                    mx = 0
                }

                if (mx >= $(this).width() - $('.midbox').width()) {
                    mx = $(this).width() - $('.midbox').width()
                }

                if (my <= 0) {
                    my = 0
                }

                if (my >= $(this).height() - $('.midbox').height()) {
                    my = $(this).height() - $('.midbox').height()
                }

                $('.midbox').css({
                    left: mx,
                    top: my
                })

                let oscale = $('.pre-bigzoom').width() / $('.midbox').width()
                $('.bigimg').css({
                    left: mx * -oscale,
                    top: my * -oscale
                })

            })

        }).on('mouseleave', function () {

            $('.midbox').stop().hide()
            $('.pre-bigzoom').stop().hide()
        }) //放大部分结束

        $('.preview-icon ul').on('mouseenter', 'li', function () {
            let $index = $(this).index()
            $(this).addClass('bordercurrent').siblings().removeClass('bordercurrent')
            $('.midimg').attr({
                src: `./img/detail-slideshow/2-${$index + 1}.jpg`
            })
            $('.bigimg').attr({
                src: `./img/detail-slideshow/3-${$index + 1}.jpg`
            })
        })

        $('.pre-nav').children().eq(1).click(function () {
            $('.preview-icon').children().stop().animate({
                top: '-400'
            }, 1000)
        })
        $('.pre-nav').children().eq(0).click(function () {
            $('.preview-icon').children().stop().animate({
                top: '0'
            }, 1000)
        })



    }

    // 购物参数栏

    function detaii() {
        $('.selec-color ul').on('mouseenter', 'li', function () {
            $(this).addClass('bordercurrent').siblings().removeClass('bordercurrent')
        }).on('click', 'li', function () {
            $(this).addClass('seleccurrent').siblings().removeClass('seleccurrent')
            $('.seleced-inner span').eq(0).text($(this).text() + ',')
        })
        $('.selec-size ul').on('mouseenter', 'li', function () {
            $(this).addClass('bordercurrent').siblings().removeClass('bordercurrent')
        }).on('click', 'li', function () {
            $(this).addClass('seleccurrent').siblings().removeClass('seleccurrent')
            $('.seleced-inner span').eq(1).css({
                marginLeft: 5
            })
            $('.seleced-inner span').eq(1).text($(this).text())
        })




    }



    // 回到顶部

    function backtop() {
        $('.service').children().hover(function () {
            $(this).stop().toggleClass('current_bg')
        })

        $('.totop').children().hover(function () {
            $(this).stop().toggleClass('current_bg')
        })
        $('.service').children().mouseenter(function () {
            $(this).children().stop().animate({
                left: -100
            })
            $(this).mouseleave(function () {
                $(this).children().stop().animate({
                    left: 35
                })
            })
        })
        $('.totop').children().mouseenter(function () {
            $(this).children().stop().animate({
                left: -100
            })
            $(this).mouseleave(function () {
                $(this).children().stop().animate({
                    left: 35
                })
            })
        })

        $('.totop').children().eq(2).click(function () {
            $('html').animate({
                    scrollTop: 0
                },
                1000);
        })

    }



    // 调用方法
    $(function () {
        backtop()
        menuplay()
        buycarpaly()
        qrplay()
        magnifier()
        detaii()
    })


    $(function () {
        var imgsrc = $('.pre-zoom img').attr('src')

        $('.insertcart').on('click', function () {

            if (!localStorage.getItem("userinfo")) {
                layer.alert('请先登录');
                setTimeout(function () {
                    location = "login.html";
                }, 2000)
            } else if ($('.selec-color ul').children('.seleccurrent').length == 0) {
                layer.msg('请先选择颜色');
                return
            } else if ($('.selec-size ul').children('.seleccurrent').length == 0) {
                layer.msg('请先选择尺码');
            } else {
                let cartObj = {
                    cname: $('#title h6').text() + $('.selec-color ul').children('.seleccurrent').text(),
                    csize: $('.selec-size ul').children('.seleccurrent').text(),
                    cnum: $('#selec-num option:selected').val(),
                    cprice: $('.price').text(),
                    cimgsrc: imgsrc,
                    uId: JSON.parse(localStorage.getItem("userinfo"))[0].u_id
                }
              
                $.ajax({
                    url: "./cart/add",
                    type: "post",
                    data: cartObj
                }).then(function (res) {
                    layer.msg(res.msg)
                })

                $.ajax({
                    url: '/cart/query',
                    type: 'get',
                    data: cartObj
                }).then(function (res) {                   
                    render(res.data);
                    $('.lists table thead tr').hide()
                })


            }


        })


        //头部欢迎词
        let userInfo = JSON.parse(localStorage.getItem("userinfo") || '[]');

        if (userInfo) {
            $(".header ul li").eq(0).html(`您好!欢迎 ${userInfo[0].u_name} ,回来!<a class="exit" href=''>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;退出</a>`)
            $(".header ul li").eq(1).hide().next().hide().next().hide()
        } else {
            $(".header ul li").eq(0).text(`您好,欢迎光临凡客诚品！`)
            $(".header ul li").eq(1).show().next().show().next().show()
        }

        $('.exit').on('click', function () {
            localStorage.clear();
            $(".header ul li").eq(0).text(`您好,欢迎光临凡客诚品！`)
            $(".header ul li").eq(1).show().next().show().next().show()
        })


    })


    //首页购物车删除数据
    $('.lists table tbody').on('click', '.operate', function () {
        let cId = $(this).parents('tr').data('cid');
        let self = this

        $.ajax({
            url: '/cart/delete',
            type: 'post',
            data: {
                cId
            }
        }).done(function (res) {
            layer.msg(res.msg);
            if (res.status == 200) {
                $(self).parents('tr').remove()
                if ($('tbody').children('tr').length <= 0) {
                    $('.lists table thead tr').show()
                }
            }
        })

    })


}